<template>
  <van-field
    v-if="h5"
    v-show="designer || (item.options && !item.options.hidden)"
    v-model="fieldModel"
    type="tel"
    maxlength="11"
    :formatter="formatter"
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :readonly="isDetail || designer || (item.options && item.options.readonly)"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    autocomplete="off"
  />
  <widget-form-item
    v-else
    v-show="designer || (item.options && !item.options.hidden)"
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-input
      v-if="!isDetail"
      v-model="fieldModel"
      type="text"
      maxlength="11"
      :readonly="designer || (item.options && item.options.readonly)"
      :placeholder="item.options && item.options.placeholder"
      @input="handleInput"
    />
    <div v-else>
      {{ fieldModel }}
    </div>
  </widget-form-item>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import props from './props'

export default {
  name: 'MPhone',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const fieldModel = computed({
      get() {
        return props.modelValue
      },
      set(val) {
        if (!props.designer) {
          emit('update:modelValue', val)
        }
      }
    })

    /** 组件权限 */
    const isDetail = computed(() => {
      if (props.detail) {
        return true
      }
      return props.item.permission > 0
    })

    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error(props.item.options.pattern || ''))
      } else {
        callback()
      }
    }

    const validatePhoneH5 = (value) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        return props.item.options.pattern || ''
      }
      return true
    }

    const rules = reactive([
      {
        required: !props.item.options.hidden && !props.item.options.readonly && props.item.options.required,
        message: props.h5 ? '' : props.item.options.requiredMessage,
        trigger: 'change'
      },
      {
        validator: props.h5 ? validatePhoneH5 : validatePhone,
        trigger: 'blur',
        validateEmpty: false // vant 对空值进行校验
      }
    ])

    // 过滤输入的数字
    const formatter = (value) => value.replace(/\D/g, '')

    const handleInput = (value) => {
      let filtered = value.replace(/\D/g, '')

      if (filtered !== value) {
        emit('update:modelValue', filtered)
      }
    }

    return {
      fieldModel,
      isDetail,
      rules,
      formatter,
      handleInput
    }
  }
}
</script>
